<script setup>
import {Bell, Message, Setting} from "@element-plus/icons-vue";

const userDropdownList = [
	{label:'个人中心',color:'#ff0000'},
	{label:'设置',color:'#ffdd00'},
	{label:'帮助',color:'#ffdd00'},
	{label:'主题设置',color:'#00a4e4'},
	{label:'退出登录',color:'#8a7967'}
]
</script>

<template>
	<div class="header-container">
		<div class="left-content">
			<el-image class="logo" src="/pexels-cmrcn-17710109.jpg" fit="fill" />
		</div>
		<div class="right-content">
			<div class="msg">
				<el-badge value="3" class="item">
					<el-icon :size="30">
						<Message />
					</el-icon>
					<template #content="{ value }">
						<div class="msg-customer">
<!--							<el-icon>-->
<!--								<Message />-->
<!--							</el-icon>-->
							<span>{{ value }}</span>
						</div>
					</template>
				</el-badge>
			</div>

			<!--头像下拉-->
			<el-dropdown class="user-dropdown">
				<span class="user-avatar">
					<el-avatar src="/沈梦溪-鸭鸭历险记.jpg" />
				</span>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item
							v-for="(item, index) in userDropdownList"
							:key="index"
							:style="{backgroundColor:item.color}">
							<div class="dropdown-item">
								<el-icon class="icon"><Bell /></el-icon><span>{{item.label}}</span>
							</div>
						</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>
	</div>
</template>

<style scoped>
.header-container{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fbb034;
	padding: 0 20px;
	height: 60px;
	color: #fff;
	font-family: Arial, sans-serif;
}
.header-container .left-content{
	height: 60px;
	display: flex;
	align-items: center;
}
.header-container .left-content .logo{
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.header-container .right-content{
	display: flex;
	align-items: center;
}
.header-container .right-content .msg{
	margin-right: 40px;
}
.header-container .right-content .msg .msg-customer{
	display: flex;
	align-items: center;
}
.header-container .right-content .icon{
	margin-left: 15px;
	cursor: pointer;
	color: #fff;
	font-size: 18px;
}

.dropdown-item {
	display: flex;
	align-items: center;
	padding: 8px 16px;
	color: #fff;
	font-size: 16px;

}
.dropdown-item span{
	font-size: 14px;
}

/*响应式样式*/
@media (max-width: 768px) {
	.left-content .logo {
		display: none;/*小屏幕隐藏logo*/
	}
}
</style>